<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		
		.fl{
			float: left;
		}

		ul>li{
			list-style: none;
			float: left;
			padding-left: 20px;
		}


	</style>

</head>
<body>
	<div class="big">
		<img src="img/02b.jpg" alt="">
	</div>
	<div class="small">
		<ul>
			<li><a href="#">
				<img src="img/01s.jpg" alt="">
			</a></li>
			<li><a href="#">
				<img src="img/02s.jpg" alt="">
			</a></li>
			<li><a href="#">
				<img src="img/03s.jpg" alt="">
			</a></li>
			<li><a href="#">
				<img src="img/04s.jpg" alt="">
			</a></li>
		</ul>
	</div>
</body>
<script>
	var big = document.querySelector(".big");

	var lis = document.getElementsByTagName("li");

	var imgbig = big.children[0];

	// console.log(lis);

	for(var i = 0;i<lis.length;i++){

		lis[i].index = i+1;

		lis[i].onclick = function(){

			imgbig.src = "img/0"+this.index+"b.jpg";

			//为何这里不能用i，原因在于，for已经循环遍历完呢，这里的i值为5
			// imgbig.src = "img/0"+(i+1)+"b.jpg";

			console.log(imgbig.src);

		}
	}

</script>
</html>